<template>
  <div>
      <Button type="success" calss="addRole" :disabled="add" @click="$router.push('/admin/adduser')">添加用户</Button>
      <Input suffix="ios-search" placeholder="Enter text" style="width: auto" 
        v-model="searchKey"
        @on-enter="search"/>
      <Table border ref="table" :columns="columns" :data="userlist">
        <template slot-scope="{ index }" slot="index">
            {{index + 1}}
        </template>
        <template slot-scope="{ row }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="editUser(row)" :disabled="edit">授权</Button>
            <Button type="error" size="small" @click="deleteUser(row)" :disabled="del">删除</Button>
        </template>
        <template slot-scope="{ row }" slot="createTime">
            {{row.createTime | moment}}
        </template>
        <template slot-scope="{ row }" slot="updateTime">
            {{row.updateTime | moment}}
        </template>
      </Table>
      <!-- 分页 -->
      <Page :total="total" :page-size="params.limit" @on-change="changPage"  v-if="update"></Page>

      <!-- 授权对话框 -->
      <Modal
          v-model="editmodal"
          :title="'授权用户' + curUser.username + '角色权限 :'"
          @on-ok="editok"
          @on-cancel="editcancel">
          <Checkbox-group v-model="checkedroles">
              <Checkbox :label="item.id" v-for="item in roles" :key="item.id">{{item.rolename}}</Checkbox>
          </Checkbox-group>
      </Modal>

      <!-- 删除材料对话框 -->
      <Modal v-model="showDelete" @on-cancel="cancel">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>Delete {{curUser.nickName}}</span>
        </p>
        <div style="text-align:center">
            <p>该删除操作无法撤销</p>
            <p>确定删除？</p>
        </div>
        <div slot="footer">
            <Button type="error" size="large" long :loading="modal_loading" @click="delUser">Delete</Button>
        </div>
      </Modal>
  </div>
</template>

<script>
export default {
  data(){
    return{
      columns: [
        {
            title: '#',
            slot:'index',
            width:'60px',
            align: 'center'
        },
        // {
        //     title: 'ID',
        //     key: 'id',
        //     align: 'center'
            
        // },
        {
            title: '用户昵称',
            key: 'nickName',
            align: 'center'
        },
        {
            title: '电话',
            key: 'phone',
            align: 'center'
        },
        {
            title: '邮箱',
            key: 'email',
            align: 'center'
        },
        {
            title: '创建时间',
            slot: 'createTime',
            align: 'center'
        },
        {
            title: '更新时间',
            slot: 'updateTime',
            align: 'center'
        },
        {
            title: '操作',
            slot:'action',
            align: 'center'
        }
      ],
      userlist: [],
        add:true,
        edit:true,
        del:true,
        //分页配置
        update:true,
        params:{
          page:1,
          limit:10,
          key:''
        },
        total:0,
        searchKey:'',
      // 删除框配置
      showDelete:false,
      curUser:'',
      modal_loading: false, 
      // 授权框配置
      editmodal: false,
      roles:[],
      checkedroles:[]
    }
  },
  created(){
    this.getUserList(this.params)
    //判断权限
    let temp = JSON.parse(window.sessionStorage.getItem('authorities'))
    for(let i = 0; i < temp.length; i++){
      temp[i] = JSON.parse(temp[i])
    }
    for(let i = 0; i < temp.length; i++){
      if(temp[i].authority == 'user:add'){
        this.add = false
      }
      if(temp[i].authority == 'user:edit'){
        this.edit = false
      }
      if(temp[i].authority == 'user:del'){
        this.del = false
      }
    }
  },
  methods:{
    async getUserList(params){
      const {data:res} = await this.$axios.get('/user/list',{
        params:params
      })
      // console.log(res)
      // console.log(res)
      this.userlist = res.page.list
      this.total = res.page.totalCount
    },
    changPage(page){
      // console.log(page)
      this.params.page = page
      this.getUserList(this.params)
    },
    search(){
      this.params.key = this.searchKey.trim()
      this.getUserList(this.params)
    },
    // 授权方法
    async editUser(row){
      this.editmodal = true
      this.curUser = row
      const {data:res} = await this.$axios.get('/user/list/' + row.id)
      this.roles = res.data
      this.checkedroles = res.roles
    },
    editok() {
      this.postEdit()
    },
    async postEdit(){
      // console.log(this.checkedroles)
      // console.log(this.curUser)
      const {data:res} = await this.$axios.post('/user/update',{ 
        id:this.curUser.id,
        checkedroles:this.checkedroles
      })
      // console.log(res)
      this.$Message.info(res.msg);
    },
    editcancel() {
        this.curUser = {}
        this.editmodal = false
    },
    // 删除方法
    deleteUser(row){
      this.curUser = row
      this.showDelete = true
    },
    async delUser(){
      this.modal_loading = true
      const {data:res} = await this.$axios.post('/user/delete/' + this.curUser.id)
      //重新获取数据
      this.params.page = 1
      this.getUserList(this.params) 
	    // 移除组件(组件强制刷新)
	    this.update = false
	    // 在组件移除后，重新渲染组件
	    // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
	    this.$nextTick(() => {
	        this.update = true
	    })  
      this.modal_loading = false
      this.showDelete = false
      this.curMaterial = {}   
      this.$Message.info(res.msg)
    },
    cancel(){
      this.curUser = {}
    },

  }
}
</script>

<style scoped>
  .ivu-btn-success{
    margin:1vh 1vw;
  }
  .ivu-page{
    margin-top:20px;
    text-align:center
  }
</style>